<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点菜器</title>
</head>
<body>
    <div id="content1">
        <div id="content2">
            <span id="span">
                随机点菜器
            </span> 
        </div>
        <button id="btn">
            开始
        </button>
        <div class="write">
            <div class="menu">
                <span class="span1">请输入菜名：</span>
                <input id="put" type="text" value="">
                <span class="commit"><button id="commit" type="button">提交</button></span><br>
            </div>
            <div class="menu">
                <span class="span2">菜单：</span>
                <textarea name="" id="int" cols="40" rows="10"></textarea>
            </div>
        </div>
    </div>
</body>

<script>
    var arr = ['东大方','热干面','荞麦面','五谷鱼粉','黄焖鸡','小碗菜','必胜客','花甲粉','煲仔饭','炒菜','喝粥','麻辣烫','驴肉火烧','必胜客','肯德基','寿司','马记永','华莱士'];
    var btn = document.getElementById('btn');
    var content = document.getElementById('content');
    var span = document.getElementById('span');
    var timer;//计时器
    var testNum = true;
    btn.onclick = function(){
        if(testNum){
            // console.log(1);
            start();
            btn.innerHTML = '停止';
            btn.style.backgroundColor = "#fa8072";
            testNum = false;
        }
        else{
            // console.log(0);
            stop();
            btn.innerHTML = '开始';
            btn.style.backgroundColor ="";
            testNum = true;
        }
    }
    //连接、定义输入框，提交按钮和显示框
    var dPut = document.getElementById("put");
    var dBtn = document.getElementById("commit");
    var dInt = document.getElementById("int");
    //点击按钮实现功能
    dBtn.onclick = function array() {
        //连接输入框
        var data = dPut.value;
        // 判断菜单是否重复
        for (var i = 0; i < arr.length; i++) {
            if(data === arr[i]){
                alert("这个菜已经躺在菜单里了哟~")
                dInt.value = arr
                put.value = "";
                return
            } 
        } 
        arr.push(data);
        //在输出框显示输入的数据
        dInt.value = arr;
        //每次手动删除输入框的数据很麻烦，所以再写一条提交之后就清空输入框的命令
        put.value = "";
    }
    function start(){
            timer = setInterval(function(){
                var num = random(0,arr.length - 1);
                span.innerHTML = arr[num];
            },50)
    }
    function stop(){
            clearInterval(timer);      
    }
    // 随机函数
    function random(a,b){
        var randomNum = Math.round(Math.random() * (b - a) + a);
        return randomNum;
    }        
</script>

<style>
    @media screen and (min-width: 320px) {
      html {
        font-size: 20px;
      }
    }
    @media screen and (min-width: 375px) {
      html {
        font-size: 24px;
      }
    }
    @media screen and (min-width: 414px) {
      html {
        font-size: 28px;
      }
    }
    #content1{
        width: 100%;
        height: 25rem;
        background: pink;
        margin: auto;
        text-align: center;
        position: relative;
    }   

    #content2{
        width: 80%;
        height: 5rem;
        background-color:#dd45;
        margin: 10rem auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 90px;
        text-align: center;
        position: absolute;
        line-height: 5rem;
        font-size: 50px;
    }

    #btn{
        /* background: rgb(1, 46, 4); */
        width: 180px;
        height: 80px;
        font-size: 30px;
        color: #0d0e0dda;
        border-radius: 12px;
        position: absolute;
        bottom: 100px;
        left: 50%;
        margin-left: -90px;
        
    }
    button#commit {
        margin-left: 5px;
    }   
    .write{
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
        padding: 1rem;
    }
    .write .menu{
        display: flex;
        align-items: center;
        font-size: 16px;
        margin: 5px auto;
    }
    .write .menu .span2{
        width: 2rem;
    }
</style>
</html>

